<template>
  <div class="meitituiguang_fabu2">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <el-breadcrumb separator="/" style="margin-top:20px">
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/zhiboxiaoshou' }">直播销售</el-breadcrumb-item>
            <el-breadcrumb-item>媒体推广商品</el-breadcrumb-item>
            <el-breadcrumb-item>回调配置</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="flex background_container" >
              <div class="fleft">
                <div class="ft" style="font-size: 16px;">下单成功页设置</div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">下单成功话术</div>
                  <div class="r"><el-input v-model="all.order_info" maxlength="100" placeholder="请输入下单成功话术"></el-input></div>
                </div>


                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">二维码展示</div>
                  <div class="r">
                    <chuantu ref="chuantu2" @getimg="getimg2" :imgs="all.order_pic" v-if="relo" style="background:white"></chuantu>
                  </div>
                </div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">二维码说明</div>
                  <div class="r"><el-input v-model="all.order_pic_info" placeholder="请输入二维码说明"></el-input></div>
                </div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">客服联系电话</div>
                  <div class="r"><el-input v-model="all.order_contact" placeholder="请输入客服联系电话"></el-input></div>
                </div>

              </div>
              <div class="fright">
                <div class="shoujim">
                  <div style="background: #eaeaea; padding:10px; ">
                    <div style="background: #fff; border-radius:5px 5px 0 0;"><img src="../../static/img/xd_success.png" style="width: 115px; margin:0px auto; padding:20px 0;"></div>
                    <div style="text-align: center;background: #fff;  font-weight: bold;  padding:0 0 20px 0; font-size: 14px;" v-if="all.order_info">{{all.order_info}}</div>
                    <div style="text-align: center;background: #fff;  font-weight: bold;  padding:0 0 20px 0; font-size: 14px;" v-if="!all.order_info">下单成功</div>
                    <!-- <div style="text-align: center;background: #fff;  padding:0 0 20px 0;  border-radius:0 0 5px 5px ;">
                      <el-button type="danger" size="small" round style="background: #fff; color:#F56C6C;">查看订单</el-button>
                    </div> -->
                  </div>
                  <div style="background: #eaeaea; padding:10px; ">

                    <div style="background: #fff; border-radius:5px 5px 0 0;" v-if="all.order_pic"><img :src="all.order_pic" style="width: 150px; margin:0px auto; padding:20px 0;"></div>
                    <div style="background: #fff; border-radius:5px 5px 0 0;" class="flexcc" v-if="!all.order_pic">
                      <div class="shouji_img flexcc" style="width: 115px; height:115px;  border-radius:5px; margin: 20px 0; border:1px #ddd dashed;" v-if="!all.order_pic">二维码</div>
                    </div>
                    <div style="text-align: center; padding-bottom:10px; background: #fff;" v-if="all.order_pic_info">{{all.order_pic_info}}</div>
                    <div style="text-align: center; padding-bottom:10px; background: #fff; font-size: 12px;" v-if="!all.order_pic_info">二维码说明</div>
                    <div v-if="all.order_contact" style="text-align: center; font-size: 12px; padding-bottom:20px; background: #fff; border-radius:0 0 5px 5px ;" >客服联系电话:{{all.order_contact}}</div>
                    <div v-if="!all.order_contact" style="text-align: center; font-size: 12px; padding-bottom:20px; background: #fff; border-radius:0 0 5px 5px ;" >客服联系电话:<span style="color:#999">155xxxxxxxx</span></div>

                  </div>


                </div>
                <!-- <div class="shouji2">
                  <div class="shouji_img flexcc" v-if="!all.order_pic">二维码</div>
                  <div class="shouji_img" v-if="all.order_pic"><img :src="all.order_pic"></div>
                </div> -->
              </div>
            </div>
            <div style="height: 100px;" class="flexcc">
              <el-button type="danger" size="medium" @click="xiayibu" style="background:#2974FF;width:160px;height:48px;border-radius:12px;border:none">发布</el-button>
            </div>

        </div>

      </div>
    </div>
    <el-dialog title="根据已有直播页发布页面" :visible.sync="log" :close-on-click-modal="false" :close-on-press-escape="false" width="700px">
      <div class="flex">
        <el-select v-model="tongbuall" placeholder="选择已有的直播页">
         <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取消</el-button>
        <el-button type="primary" @click="tongbugo">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as qiniu from 'qiniu-js'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../components/chuantu.vue";
  export default {
    components: {
      top,left,chuantu
    },
    name: "meitituiguang_fabu2",
    data() {
      return {
          list:"",
          tongbuall:"",
          log:false,
          input:"",
          all:{
            title:"",//	wq店铺	是	string	无
            mobile:"",//	18056565656	是	string	电话
            contact:"",//	18056565656	是	string	联系方式
            qrcode:"",//	二维码	是	string	二维码
            order_info:"",//	下单返回话术	是	string	下单返回话术
            order_pic:"",//	3	是	string	下单返回图片
            order_pic_info:"",//	desc	是	string	下单返回图片描述
            account_id:0,//	0	是	string	无
            other_contact:"",	//0	是	string	其他联系方式
            order_contact:"",	//	是	string	下单后联系方式
            duo:0
          },
          all2:{
            qrcode:""
          },
          relo:true
      }
    },
    created() {
		
      let wenjianjia = 'web-onepage'
      if(process.env.NODE_ENV === 'development'){
        // wenjianjia = 'test-web-onepage'
      }
      if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
        wenjianjia = 'web-onepage'
      }
      if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
        wenjianjia = 'test-web-onepage'
      }
	  if(window.location.href.includes('localhost')){
	    wenjianjia = 'test-web-onepage'
	  }

      axios.get(`https://file.91haoka.cn/${wenjianjia}/${this.$route.query.id}.json?v=${Math.random()}`)
      // axios.get(`${this.apis}/storage/web-onepage/${this.$route.query.id}.json?v=${Math.random()}`)
        .then(response => {
            this.all = JSON.parse(response.data)
            this.relo = false
            this.$nextTick(()=>{
              this.relo = true
            })
        })
    },
    mounted() {

    },
    methods: {
      getimg:function(img){
        this.all.qrcode = img
      },
      getimg2:function(img){
        this.all.order_pic = img
      },
      xiayibu:function(){
        if(this.$route.query.duo){
          this.all.duo = this.$route.query.duo
        }
        var Obj2str = function(o) {
            if (o == undefined) {
                return "";
            }
            var r = [];
            if (typeof o == "string") return "\"" + o.replace(/([\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
            if (typeof o == "object") {
                if (!o.sort) {
                    for (var i in o)
                        r.push("\"" + i + "\":" + Obj2str(o[i]));
                    if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                        r.push("toString:" + o.toString.toString());
                    }
                    r = "{" + r.join() + "}"
                } else {
                    for (var i = 0; i < o.length; i++)
                        r.push(Obj2str(o[i]));
                    r = "[" + r.join() + "]";
                }
                return r;
            }
            return o.toString().replace(/\"\:/g, '":""');
        }
        
        let wenjianjia = 'web-onepage'
        if(process.env.NODE_ENV === 'development'){
          // wenjianjia = 'test-web-onepage'
        }
        if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
          wenjianjia = 'web-onepage'
        }
        if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
          wenjianjia = 'test-web-onepage'
        }
		if(window.location.href.includes('localhost')){
		  wenjianjia = 'test-web-onepage'
		}
        
        axios.post(`${this.apis}/api/qiniu/token`,{bucket:'gthshopstore',cloud:`${wenjianjia}/${this.$route.query.id}.json`})
          .then(response => {
            var that = this
            if(response.data.msg.code == 0){
              const observer = {
                next(res){
                  
                },
                error(err){
                  
                },
                complete(res){
                  
                  that.$message.success('发布成功');
                  that.$router.push({
                    path:'/zhiboxitong/meitituiguang'
                  })
                }
              }

              let files = Obj2str(JSON.stringify(this.all))
              let file = new File([files], `${wenjianjia}/${this.$route.query.id}.json`, {type: 'application/json'});
              const observable = qiniu.upload(file, file.name, response.data.data, {}, {})
              const subscription = observable.subscribe(observer) // 上传开始
            }else{
              this.$message.error(response.data.msg.info);
            }
          });

        // let data = {
        //   id:this.$route.query.id,//	是	string	销售页的id
        //   type:"json",//	是	string	css json 等 文件的后缀本示例为 5.css
        //   data:JSON.stringify(this.all),//	是	array	要存的数据 到时候访问id.type(5.css)返回的就是data里的数据
        //   path:"onepage",//	否	string	store 店铺用的 page 商品用的
        // }
        // axios.post(`${this.apis}/api/page/json`,data)
        //      		.then(response => {
        //      			if (response.data.msg.code == 0) {
        //              this.$message.success('发布成功');
        //              this.$router.push({
        //                path:'/zhiboxitong/meitituiguang'
        //              })
        //      			} else {
        //      				this.$message.error(response.data.msg.info);
        //      			}
        //      	})
      }

    }
  }
</script>

<style scoped lang="less">
  .meitituiguang_fabu2 {
    color: #333;
    min-height: 100vh;
    /deep/ .el-breadcrumb{ font-size: 16px;}
    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
      background: #eee;
    }
    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      border-radius: 10px;
      background: #fff;
    }
    *{ box-sizing: border-box;}
    .zhiboxitong_content{
      height: calc(100vh - 70px);
      .left{width: 210px;background: #FAFAFE;height: 100%;}
      .right{ width: calc(100vw - 220px);padding: 10px;
      .shoujim {
        width: 300px; height: 700px; background: url('https://static.91haoka.cn/gantanhao/shouji3.png');background-size: 300px 700px; padding: 50px 20px;
      }
        .zhiboxitong_right{
    height:100vh;
           overflow: auto;border-radius: 5px; padding-left:15px ;
        }
        .fleft{
          width: 420px; padding-top: 50px;
          .ft{ font-size: 18px;margin-bottom: 30px;font-weight: bold;}
          .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
          .r{}
        }
        .fright{
          width: 300px; margin-left: 100px; padding-top: 50px;
          .shouji{ width: 300px;height: 700px;background: url('https://static.91haoka.cn/gantanhao/shouji.png'); background-size: 100%; padding-top: 197px;
            .shouji_img{width: 115px;height: 115px; border: 1px solid #CBCBCB;margin: 0 auto;border-radius: 5px;background: #eaeaea;
              img{ width: 115px;height: 115px;}
            }
            .shouji_qita{ margin-top: 190px;margin-left: 42px;width: 210px;}
          }

          .shouji2{ width: 300px;height: 600px;background: url('https://static.91haoka.cn/gantanhao/shouji2.png'); background-size: 100%; padding-top: 342px;
            .shouji_img{width: 120px;height: 120px; border: 1px solid #CBCBCB;margin: 0 auto;border-radius: 5px;background: #eaeaea;
              img{ width: 120px;height: 120px;}
            }
          }
        }
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
  .background_container{
    height:100vh;
    background: #F8F9FD;
    border-radius: 30px 0 0 0;
    padding-left:20px ;
    margin-top: 20px;
  }
  /deep/ .el-input__inner{
    border-radius: 12px;
  }
</style>
